import {Echarts} from './Trends/Echarts';
import React, {useState} from 'react';
import {useRecords} from '../../hooks/useRecords';
import {initPieOption, initTrendsOption} from '../../lib/initOption';
import {getToday} from '../../lib/dayUtils';

const Trends = () => {
  const {generateTagsMonthTable, generateTrends} = useRecords();
  const [selectedMonth, setSelectedMonth] = useState(getToday());
  const clickAction = (newMonth: string) => setSelectedMonth(newMonth)
  const source = generateTagsMonthTable(selectedMonth);
  const displayMonth = selectedMonth.substring(0, 7).replaceAll('-', '.');

  return (
    <>
      <Echarts option={initTrendsOption(generateTrends(getToday()))} clickAction={clickAction}/>
      <Echarts option={initPieOption(source, displayMonth)} chartHeight="400px"/>
    </>
  );
};

export {Trends};